<template>
    <div v-transfer-dom>
        <popup v-model="workProp"
               width="100%"
               @on-hide="propHide">
            <header>
                <span @click="propHide">取消</span>
                <span @click="confirm">确定</span>
            </header>
            <div class="content-wrap">
                <noData v-if="theModel.length == 0"></noData>
                <ul v-else>
                    <li v-for="(item,index) in theModel"
                        :key="index"
                        @click="checkedFn(item)">
                        <label>{{item.DeptName}}</label>
                        <icon v-if="item.checked"
                              type="success-no-circle"></icon>
                    </li>
                </ul>
            </div>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup, Icon } from 'vux'
export default {
    name: 'workProp',
    data () {
        return {
            workProp: false,
            theModel: [],
            userInfo: ''
        }
    },
    components: {
        Popup,
        Icon
    },
    directives: {
        TransferDom
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.getData()
    },
    props: {
        selectWork: {
            type: Function
        },
        workPropShow: {
            type: Boolean,
            default: false
        },
        currentIndex: {

        }
    },
    watch: {
        workPropShow (newVal) {
            this.workProp = newVal
        },
        currentIndex () {
            this.getData()
        }
    },
    methods: {
        checkedFn (item) {
            this.$set(item, 'checked', !item.checked)
        },
        propHide () {
            this.$parent.workPropShow = false
        },
        confirm () {
            let memberWorkArr = []
            let memberWorkIdArr = []
            this.theModel.forEach(item => {
                if (item.checked) {
                    memberWorkArr.push(item.DeptName)
                    memberWorkIdArr.push(item.DeptId)
                }
            })
            this.selectWork(memberWorkArr.join('_'), memberWorkIdArr.join('_'))
        },
        getData () {
            this.$axiosAjax.getConfigJson({
                allowPaging: 'true',
                business: 'FetchHiddenDangerStandards',
                data: {
                    ProjectId: this.userInfo.deptid
                },
                pageIndex: 0,
                pageSize: 20000,
                tokenId: this.userInfo.userid,
                userId: this.userInfo.tokenId
            }).then((res) => {
                if (res.data.code === 0) {
                    this.theModel = res.data.data
                    this.$forceUpdate()
                }
            })
        }
    }
}
</script>
<style scoped>
header {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.1);
}
header span:first-child {
    font-size: 14px;
    color: #333;
}
header span:last-child {
    font-size: 14px;
    color: cornflowerblue;
}
.content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
}
li {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
li label {
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #666;
}
</style>
